<template>
  <div class="vue-i18n clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">安装依赖并引入</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vue-i18n --save<br>
            // main.js<br>
            import VueI18n from 'vue-i18n'<br>
            Vue.use(VueI18n)<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">封装语言包</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // cn.js<br>
            module.exports = {<br>
              &nbsp;&nbsp;message: {<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;title: '运动品牌'<br>
              &nbsp;&nbsp;}<br>
            }<br>
            // en.js<br>
            module.exports = {<br>
              &nbsp;&nbsp;message: {<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;title: 'Sport Brands'<br>
              &nbsp;&nbsp;}<br>
            }<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">语言包注入</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // main.js<br>
            const i18n = new VueI18n({<br>
              &nbsp;&nbsp;// 语言标识<br>
              &nbsp;&nbsp;locale: getCookie('cn','en'),<br>
              &nbsp;&nbsp;messages: {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;//  语言包路径<br>
                &nbsp;&nbsp;&nbsp;&nbsp;'cn': require('./common/lang/cn'),<br>
                &nbsp;&nbsp;&nbsp;&nbsp;'en': require('./common/lang/en')<br>
              &nbsp;&nbsp;}<br>
            })<br>
            <br>
            const app = new Vue({<br>
              &nbsp;&nbsp;router,<br>
              &nbsp;&nbsp;i18n,<br>
              &nbsp;&nbsp;...App<br>
            }).$mount('#app')
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">使用</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 使用(使用时为双括弧)<br>
            「{$t("message.title")}」<br>
            <br>
            // 切换<br>
            let locale = this.$i18n.locale<br>
            locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueI18n'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-i18n{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
